<template>
  <div class="home-container">
    <el-container>
      <el-header>
        <div class="img">
          <img src="../assets/heima.png" alt="" />
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="btn">退出</el-button>
      </el-header>
      <el-container>
       
          <el-aside :width="collapse?'64px':'200px'">
            <div @click="arrowHandle" class="arrow"  style="text-align:center;">|||</div>
            <el-menu
             :default-active="defaultActive"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#303133"
              active-text-color="#ffd04b"
              :unique-opened="true"
              :router="true"
              :collapse="collapse"   
              :collapse-transition="false"

            >
              <el-submenu
                :index="index + ''"
                v-for="(item, index) in menList"
                :key="index"
              >
                <template slot="title">
                  <i  style="margin-right:10px" :class="['iconfont', iconObj[index]]"></i>
                  <span>{{ item.authName }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    :index="item.path"
                    v-for="(item, index) in item.children"
                    :key="index"
                     @click="itemHandle(item.path)"
                  >
                    <i class="el-icon-menu"></i
                    >{{ item.authName }}</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
           
<script>
// import  {menus_api} from  '../api'  //导入获取侧边菜单的api
import { menus_api } from "../api";
export default {
  data() {
    return {
      menList: [],
      //准备一个图标的对象
      iconObj: {
        0: "icon-user",
        1: "icon-tijikongjian",
        2: "icon-shangpin",
        3: "icon-danju",
        4: "icon-baobiao",
      },
       //  默认展开哪一项
      defaultActive:window.localStorage.getItem("defaultActive")|| 'users',  //如果有就取出本地缓存的哪个值,没有也可以用user这一项展开,    默认开启的那一项,

       collapse: false   //
    };
  },
  methods: {
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    btn() {
      this.$router.push("/login");
    },
    //  获取左侧菜单函数
    async getMenus() {
      //   const  res=await menus_api()
      // //   console.log(res,66666);

      //获取左侧菜单数据

      const { data: res1 } = await menus_api(); //解构data 命名为res1
      console.log(res1, 66666);
      //this.menList=res.data.data

      this.menList = res1.data;  //把拿到的数据赋值给空数组
    },
   //  控制菜单栏收起还是打开
    arrowHandle() {
      this.collapse = !this.collapse
    },
    itemHandle(path){
        // //  给二级绑定点击事件
        //   console.log(path,111111);
        //  需要点击后做两件事
      /* 
      1-将获取的path赋值给defaultActive
      2-将这个值做本地缓存   localStorage
      3-data中的defaultActive  初次进入或者刷新的时候  从本地缓存中拿，如果本地缓存有值就直接拿，没值的话就取默认值 users
      */   
        this.defaultActive=path
        window.localStorage.setItem('defaultActive',path)
    }
  },
  created() {
    this.getMenus(); //页面加载的时候,调用函数,发送获取后台数据请求
  },
};
</script>
<style scoped lang="less">
.home-container {
  height: 100%;
  width: 100%;
  background-color: pink;
  .el-container {
    height: 100%;
    width: 100%;
    .el-header {
      display: flex;
      justify-content: space-between;
      background-color: #373d41;
      .img {
        display: flex;
        align-items: center;
      
      }
      span {
        color: white;
        font-size: 20px;
        margin-left: 20px;
      }
      .el-button {
        height: 40px;
        margin: 10px 0;
        font-size: 15px;
      }
    }
    .el-container {
      height: 100%;
      width: 100%;
      .el-aside {
        height: 100%;
        background-color: #373d41;
        .el-menu-vertical-demo{
            border:none
        }
      }
    }
  }
}
</style>